<!--
 * @Author: your name
 * @Date: 2020-05-08 19:58:10
 * @LastEditTime: 2020-05-29 09:53:11
 * @LastEditors: 尹伊
 * @Description: In User Settings Edit
 * @FilePath: /moguProject/src/pages/pieEchars/index.vue
 -->
<template>
  <div>
    <!-- 骨架屏 -->
    <!-- <skeleton type='listcom' :active='true' :options="{
        row: 3,
        lineHight: 20
    }" /> -->

    <!-- 百分比图 -->
    <!-- <div ref="profileMap" :style="{width: '100px', height: '100px'}"></div> -->
    <div ref="profileMap" class="profile-map" :style="{width: '800px', height: '400px'}"></div>
  </div>
</template>

<script>
  export default {
    name: 'hello',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    mounted() {
      // this.init();
      this.pieInit()
    },
    methods: {
      pieInit() {
        var that = this
        var chart = this.$echarts.init(this.$refs.profileMap);
        var option = {
          tooltip: {
            trigger: 'item',
            formatter: ' {b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 10,
            data: ['互联网',
              '金融',
              '政企',
              '传统',
            ]
          },
          series: [
            {
              // name: '一级行业', 
              type: 'pie',
              selectedMode: 'single',
              radius: [0, '30%'],

              label: {
                position: 'inner'
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 147, name: '互联网', selected: true },
                { value: 29, name: '金融' },
                { value: 22, name: '政企' },
                { value: 14, name: '传统' },
              ]
            },
            {
              // name: '二级行业', 
              type: 'pie',
              radius: ['40%', '55%'],
              label: {
                formatter: '  {b|{b}：}{c}  {per|{d}%}  ',
                backgroundColor: '#eee',
                borderColor: '#aaa',
                borderWidth: 1,
                borderRadius: 4,
                rich: {
                  a: {
                    color: '#999',
                    lineHeight: 22,
                    align: 'center'
                  },
                  hr: {
                    borderColor: '#aaa',
                    width: '100%',
                    borderWidth: 0.5,
                    height: 0
                  },
                  b: {
                    fontSize: 16,
                    lineHeight: 33
                  },
                  per: {
                    color: '#eee',
                    backgroundColor: '#334455',
                    padding: [2, 4],
                    borderRadius: 2
                  }
                }
              },
              data: [
                { value: 147, name: '互联网', selected: true },
                { value: 29, name: '金融' },
                { value: 22, name: '政企' },
                { value: 14, name: '传统' },
              ]
            }
          ]
        };
        chart.setOption(option);
      },
      init() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(this.$refs.profileMap)
        var placeHolderStyle = {
          normal: {
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            color: "rgba(0,0,0,0)",
            borderWidth: 0
          },
          emphasis: {
            color: "rgba(0,0,0,0)",
            borderWidth: 0
          }
        };


        var dataStyle = {
          normal: {
            formatter: '{c}%',
            position: 'center',
            show: true,
            textStyle: {
              fontSize: '20',
              fontWeight: 'normal',
              color: '#34374E'
            }
          }
        };


        var option = {
          backgroundColor: '#fff',
          title: [{
            text: '负面评论',
            left: '45%',
            top: '80%',
            textAlign: 'center',
            textStyle: {
              color: '#AAAFC8',
              fontWeight: 'normal',
              fontSize: '16',
              textAlign: 'center',
            },
          }],

          //第一个图表
          series: [
            //第二个图表
            {
              type: 'pie',
              hoverAnimation: false,
              radius: ['75%', '85%'],
              center: ['50%', '50%'],
              startAngle: 225,
              labelLine: {
                normal: {
                  show: false
                }
              },
              label: {
                normal: {
                  position: 'center'
                }
              },
              data: [{
                value: 100,
                itemStyle: {
                  normal: {
                    color: '#E1E8EE'


                  }
                },

              }, {
                value: 35,
                itemStyle: placeHolderStyle,
              },

              ]
            },

            //上层环形配置
            {
              type: 'pie',
              hoverAnimation: false,
              radius: ['75%', '85%'],
              center: ['50%', '50%'],
              startAngle: 225,
              labelLine: {
                normal: {
                  show: false
                }
              },
              label: {
                normal: {
                  position: 'center'
                }
              },
              data: [{
                value: 30,
                itemStyle: {
                  normal: {
                    color: '#4897f6'
                  }
                },
                label: dataStyle,
              }, {
                value: 55,
                itemStyle: placeHolderStyle,
              },

              ]
            },
          ]
        };
        // 绘制图表
        myChart.setOption(option);
      }
    }
  }
</script>

<style scoped>
  .pie-circle {
    /* height: 100px;
    width: 100px; */
  }

  .profile-map {
    width: 100%;
    height: 100%;
    margin: auto;
  }
</style>